<template>
    <applyShortPreview v-if="isConfirmApply"></applyShortPreview>
    <div v-else class="m-window" v-loading="pageLoading" element-loading-text="数据加载中">
        <!-- 天进宝申请 -->
        <el-row type="flex" class="applyShort-col">
            <el-col :span="12" class="financial">
                <label class="title">可融金额：</label>
                <div class="money"><sup>￥</sup> {{getFormatMoney}}</div>
            </el-col>
            <el-col :span="2" style="margin-top: 35px;">
                <el-button type="primary" @click="financing" :disabled="isBtnDisable">融资</el-button>
            </el-col>
            <div class="m-agTable m-top2 m-bottom history-table">
                <label>融资历史记录</label>
                <ag-grid-vue class="ag-theme-balham ag-table" :gridOptions="applyGridOptions"
                    :columnDefs="applyColumnDefs" :defaultColDef="defaultColDef" :rowData="applyRowData"
                    v-loading="loading"></ag-grid-vue>
                <pagination style="height:1%;"
                    :config="{pageNumberChanged, pageSizeChanged, pageNumber: searchParams.pageNumber,pageSizes:[10, 30, 50, 100],justifyContent:'flex-end'}"
                    :total="totalNum"></pagination>
            </div>
        </el-row>
    </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
    .applyShort-col {
        flex-direction: column;
        height: 100%;

        .financial {
            .title {
                color: #454545;
                font-size: 12px;
                font-weight: 600;
            }

            .money {
                color: #FF821F;
                font-size: 45px;
                font-weight: 600;

                sup {
                    font-size: 22px;
                }
            }
        }

        .history-table {
            margin-top: 35px;
            height: calc(100% - 240px);

            & label {
                font-size: 12px;
                font-weight: 600;
            }

            .ag-table {
                width: 100%;
                height: 99%;
                margin-top: 8px;
            }
        }

        .hint {
            color: red;
            font-size: 14px;
            font-weight: 600;
            font-family: '黑体';
        }
    }
</style>

<script>
    import {
        formatPrice
    } from '@/util/format.js'
    import gridOptions from "lesso-common/public/gridOptions"
    import Pagination from '@/components/pagination.vue'
    import applyShortPreview from './applyShortPreview.vue'
    import {
        mapState
    } from "vuex";
    /**
     * @group financeManager
     * 天进宝融资申请
    */
    export default {
        name:"applyShort",
        data() {
            return {
                pageLoading: true,
                defaultColDef: {
                    resizable: true
                },
                custId: this.$store.state.supplyChainFinance.custInf.custId, //获取供应商id
                isConfirmApply: false,
                searchParams: {
                    pageNumber: 1
                },
                totalNum: 0,
                availableAmount: 0,
                applyGridOptions: {},
                applyColumnDefs: [],
                applyRowData: [],
                loading: false,
                isBtnDisable: true
            }
        },
        beforeMount() {
            let params = {
                "condition": {
                    "custId": this.custId
                },
                "current": 1,
                "size": 10
            }
            this.getApplyHistoy(params);
            params = {
                'supplierId': this.custId
            }
            this.getAvailableAmount(params);
        },
        created() {
            // this.getOneOrSave()
            this.applyGridOptions = gridOptions()
            this.applyColumnDefs = [{
                    headerName: "序号",
                    field: "xuhao",
                    valueGetter: 'node.id',
                    cellRenderer: function (params) {
                        if (params.value != undefined) {
                            return +params.value + 1;
                        }
                    }
                },
                {
                    headerName: "申请编号",
                    field: "itemNo"
                },
                {
                    headerName: "融资开始日期",
                    field: "payDate"
                },
                {
                    headerName: "融资金额",
                    field: "actAmt",
                    valueFormatter: params => {
                        return formatPrice(params.value)
                    }
                },
                {
                    headerName: "已还款金额",
                    field: "paybackAmount",
                    valueFormatter: params => {
                        return formatPrice(params.value)
                    }
                },
                {
                    headerName: "融资产品",
                    field: "finType"
                },
                {
                    headerName: "还款状态",
                    field: "paybackProcessStatus"
                }
            ]
        },
        computed: {
            ...mapState(['supplyChainFinance']),
            getFormatMoney() {
                return formatPrice(this.availableAmount)
            }
        },
        methods: {
            /**
             * @vuese
             * 获取天进宝当前可融金额
             * @arg 参数params为Obj;代表接口请求参数
            */
            getAvailableAmount(params) {
                let that = this
                this.$http.getAvailableAmount(params).then((response) => {
                        setTimeout(function () {
                            that.pageLoading = false
                        }, 500)
                        if (response.data.code == 200) {
                            this.availableAmount = response.data.rows.sumBorrowBalance ? response.data.rows
                                .sumBorrowBalance : 0.00;
                        } else {
                            this.availableAmount = 0;
                        }
                        if (this.availableAmount > 0) {
                            this.isBtnDisable = false
                        }
                    })
                    .catch((errror) => {
                        this.pageLoading = false
                        this.$alert("查询可融金额失败，请检查网络！", {
                            confirmButtonText: "确定",
                            customClass: "alertFailure"
                        });
                    })
            },
            /**
             * @vuese
             * 获取融资历史记录
             * @arg 参数params为Obj;代表接口请求参数
            */
            getApplyHistoy(params) {
                this.applyRowData = []
                this.$http.getApplyHistoy(params).then((response) => {
                        this.loading = false
                        if (response.data.code == 200) {
                            this.applyRowData = response.data.rows
                            this.totalNum = response.data.total;
                            let gridOption = this.applyGridOptions
                            setTimeout(function () {
                                let allColumnIds = []
                                if (gridOption.columnApi) {
                                    gridOption.columnApi.getAllColumns().forEach(function (column) {
                                        allColumnIds.push(column.colId)
                                    })
                                    gridOption.columnApi.autoSizeColumns(allColumnIds)
                                }
                            })
                        } else {
                            this.applyRowData = []
                            this.totalNum = 0;
                        }
                    })
                    .catch((errror) => {
                        this.$alert("查询融资历史记录失败，请检查网络！", {
                            confirmButtonText: "确定",
                            customClass: "alertFailure"
                        });
                    })
            },
            /**
             * @vuese
             * 点击融资按钮回调
            */
            financing() {
                if (this.availableAmount <= 0) {
                    this.$alert("可融金额大于0才允许申请融资", {
                        confirmButtonText: "确定",
                        customClass: "alertPrompt"
                    });
                    return
                }
                this.isConfirmApply = true;
            },
            /**
             * @vuese
             * 页码改变回调
             * @arg 参数pageNum为当前页码
            */
            pageNumberChanged(pageNum) {
                if (pageNum) {
                    let params = {
                        "condition": {
                            "custId": this.custId
                        },
                        "current": pageNum,
                        "size": 10
                    }
                    this.getApplyHistoy(params);
                }
            },
            /**
             * @vuese
             * 每页显示条数改变回调
             * @arg 参数pageSize为当前每页显示条数
            */
            pageSizeChanged(pageSize) {
                if (pageSize) {
                    let params = {
                        "condition": {
                            "custId": this.custId
                        },
                        "current": 1,
                        "size": pageSize
                    }
                    this.getApplyHistoy(params);
                }
            },
            //获取客户表详情,若没有则新增
            // async getOneOrSave() {
            //     let params = this.supplyChainFinance.custInf2
            //     let that = this
            //     await that.$http.getOneOrSave(params).then(({
            //             data
            //         }) => {
            //             if (data.code == 200 && data.rows) {
            //                 //'融资状态:0-未融资,1-在天进宝  2-在月有钱'
            //                 //that.isAllowFinancing = data.rows.finStatus <= 1 ? true:false
            //             } else {
            //                 that.$alert("获取新增客户信息失败:" + data.info, {
            //                     confirmButtonText: "确定",
            //                     customClass: "alertFailure"
            //                 })
            //             }
            //         })
            //         .catch((errror) => {
            //             that.$alert("查询客户表，请检查网络！", {
            //                 confirmButtonText: "确定",
            //                 customClass: "alertFailure"
            //             })
            //         })
            // }
        },
        components: {
            Pagination,
            applyShortPreview
        }
    }
</script>